<template>
    <div class="toolbar-container">
        <el-button-group>
            <el-tooltip placement="bottom" content="开关地球" effect="light">
                <el-button class="iconfont icon-earth-full" plain @click="toggleEarthShow()" size="default"></el-button>
            </el-tooltip>
            <el-tooltip placement="bottom" content="标记建筑" effect="light">
                <el-button class="iconfont icon-shiqu" plain @click="toggleMarkBim()" size="default"></el-button>
            </el-tooltip>
            <el-tooltip placement="bottom" content="标记建筑的面" effect="light">
                <el-button class="iconfont icon-huaduobianxing" plain @click="toggleMarkBimFace()" size="default"></el-button>
            </el-tooltip>
        </el-button-group>
    </div>
</template>

<script lang="ts" setup>
import * as EasyCesium from "@xhymf1992/easy-cesium";

let markBimFunc: EasyCesium.FunctionDrawPolygonAndEditPositionWithAxis | undefined = undefined;
let markBimFaceFunc: EasyCesium.FunctionDrawPolygonAndEditPositionWithAxis | undefined = undefined;

const toggleEarthShow = () => {
    window.viewer.earthShow = !window.viewer.earthShow;
}

const toggleMarkBim = () => {
    // 检查标记建筑的功能实例是否存在，
    if(markBimFunc) {
        // 如果存在，则检查实例是否被挂起，如果是，则启用实例，否则结束该实例，否则创建实例
        if(markBimFunc.suspend) {
            // 先取消功能实例的挂起状态
            markBimFunc.suspend = false;
        }else {
            markBimFunc.suspend = false;
            // 获取多边形的点坐标并打印
            console.log(`地心坐标：${markBimFunc.getPolygonPositions()}\n经纬度坐标：${markBimFunc.getPolygonPositionsCarto()}`);
        
            // 销毁实例
            markBimFunc.destroy();
            markBimFunc = undefined;
        }
    }else {
        // 当前功能实例启用时，将其他功能实例挂起，不然不同实例的交互操作会相互干扰
        if(markBimFaceFunc) {
            markBimFaceFunc.suspend = true;
        }

        let options = {
            polygonName: "", // 绘制的多边形的名称，可选，默认为空
            polygonColor: "rgba(0,0,255,0.5)", // 绘制的多边形的颜色，可选，默认为rgba(0,0,255,0.5)
            polygonSelectedColor: "rgba(255,0,0,1)", // 多边形被选中时的颜色，可选，默认为rgba(255,0,0,1)
            polygonWidth: 3, // 多边形的宽度，可选，默认为3
    
            // 标记建筑物时，需选5（贴在3dtiles上）
            polygonHeightReference: 5, // 多边形的高程类型：0-海拔；1-贴在地表或3dtiles；2-相对于地表或3dtiles；3-贴在地表；4-相对于地表；5-贴在3dtiles；6-相对于3dtiles。默认为0
            
            // 标记建筑物时，需选1（只显示贴在3dtiles上的部分）
            polygonClassificationType: 1, // 多边形贴在地表或3dtiles上时，显示的部分：0-只显示贴在地形的部分；1-只显示贴在3dtiles的部分；2-全都显示。可选，默认为2
        
            pointColor: "rgba(0,255,0,1)", // 绘制多边形时的点的颜色，可选，默认为rgba(0,255,0,1)
            pointSelectedColor: "rgba(255,0,0,1)", // 绘制多边形时的点被选中时的颜色，可选，默认为rgba(255,0,0,1)
            pointSize: 10, // 绘制多边形时的点的大小，可选，默认为10

            moveSpeedFactor: 0.1, // 移动速度的比例，用于控制速度，可选，默认为1
            coordAxisLength: 100, // 坐标轴的长度，可选，默认为500
            coordAxisWidth: 20, // 坐标轴的宽度，可选，默认为10
            coordAxisWidthSelected: 40, // 坐标轴选中时的宽度，可选，默认为20

            viewer: window.viewer // cesium视图对象，必填
        }
    
        /**
         * markBimFaceFunction功能类操做说明
         * 单击左键：创建新的点
         * alt+单击左键：选中某个点/多边形
         * alt+单击右键：取消选中 
         * alt+移动鼠标：移动选中的点
         * ctrl+z：取消新创建的点
         * delete: 删除选中的点/多边形
         * e: 对选中的点进行坐标轴编辑
         * enter：完成坐标轴点编辑
         * esc：退出坐标轴点编辑
         */
        markBimFunc = new EasyCesium.FunctionDrawPolygonAndEditPositionWithAxis(options); // 构建绘制多边形功能类
        markBimFunc.init(); // 类初始化
    }
}

const toggleMarkBimFace = () => {
    if(markBimFaceFunc) {
        if(markBimFaceFunc.suspend) {
            markBimFaceFunc.suspend = false;
        }else {
            markBimFaceFunc.suspend = false;
            console.log(`地心坐标：${markBimFaceFunc.getPolygonPositions()}\n经纬度坐标：${markBimFaceFunc.getPolygonPositionsCarto()}`);
        
            markBimFaceFunc.destroy();
            markBimFaceFunc = undefined;
        }
    }else {
        if(markBimFunc) {
            markBimFunc.suspend = true;
        }

        let options = {
            polygonName: "", // 绘制的多边形的名称，可选，默认为空
            polygonColor: "rgba(255,255,0,0.5)", // 绘制的多边形的颜色，可选，默认为rgba(0,0,255,0.5)
            polygonSelectedColor: "rgba(255,0,0,1)", // 多边形被选中时的颜色，可选，默认为rgba(255,0,0,1)
            polygonWidth: 3, // 多边形的宽度，可选，默认为3
    
            // 标记建筑物的面时，需选0（绝对高程）
            polygonHeightReference: 0, // 多边形的高程类型：0-海拔；1-贴在地表或3dtiles；2-相对于地表或3dtiles；3-贴在地表；4-相对于地表；5-贴在3dtiles；6-相对于3dtiles。默认为0
        
            // 标记建筑物面时，需选1（只显示贴在3dtiles上的部分）
            polygonClassificationType: 1, // 多边形贴在地表或3dtiles上时，显示的部分：0-只显示贴在地形的部分；1-只显示贴在3dtiles的部分；2-全都显示。可选，默认为2
        
            pointColor: "rgba(0,255,0,1)", // 绘制多边形时的点的颜色，可选，默认为rgba(0,255,0,1)
            pointSelectedColor: "rgba(255,0,0,1)", // 绘制多边形时的点被选中时的颜色，可选，默认为rgba(255,0,0,1)
            pointSize: 10, // 绘制多边形时的点的大小，可选，默认为10

            moveSpeedFactor: 0.1, // 移动速度的比例，用于控制速度，可选，默认为1
            coordAxisLength: 100, // 坐标轴的长度，可选，默认为500
            coordAxisWidth: 20, // 坐标轴的宽度，可选，默认为10
            coordAxisWidthSelected: 40, // 坐标轴选中时的宽度，可选，默认为20

            viewer: window.viewer // cesium视图对象，必填
        }

        markBimFaceFunc = new EasyCesium.FunctionDrawPolygonAndEditPositionWithAxis(options);
        markBimFaceFunc.init();
    }
}

window.wndMsgServer.addRouter("/toggleEarthShow", (data) => {
    console.log(data);
    toggleMarkBim();

    return "toggleEarthShow finished";
})


</script>

<style scoped>
.toolbar-container{
    position: fixed;
    left: 45%;
    top: 15px;
    width: fit-content;
}
.el-button{
    border: hidden;
    color:rgba(28,106,235,1);
    
}
.el-button:hover{
    color:red;
}

.cesium-baseLayerPicker-dropDown{
    /* position: absolute; */
    /* right: 500px; */
    top: 100px;

}
/* .cesium-viewer-geocoderContainer{
    top: 8px;
    size: 24px;
} */
.iconfont{
    font-size:24px;
}
</style>